<template>
  <div class="heading-picker">
    <headingItem></headingItem>
  </div>
</template>

<script setup lang="tsx">
import { ref } from 'vue'
import { Editor } from '@tiptap/vue-3'
import IconView from './IconView.vue'
const props = defineProps({
  editor: {
    type: Editor,
    required: true
  }
})
const emit = defineEmits(['change'])
const headingList = ref([
  {
    level: 1,
    text: 'h1'
  },
  {
    level: 2,
    text: 'h2'
  },
  {
    level: 3,
    text: 'h3'
  },
  {
    level: 4,
    text: 'h4'
  }
])
const headingItem = () => {
  return (
    <>
      {headingList.value.map(item => {
        return (
          <div
            key={item.level}
            class={{
              'heading-item': true,
              'item-active': props.editor.isActive('heading', { level: item.level })
            }}
            onClick={() => handleClick(item.level)}
          >
            <item.text>
              {item.text}
              {props.editor.isActive('heading', { level: item.level }) ? (
                <IconView name="selected-v2" class="is_active"></IconView>
              ) : (
                ''
              )}
            </item.text>
          </div>
        )
      })}
    </>
  )
}
const handleClick = (level: number) => {
  emit('change', level)
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.heading-picker {
  .heading-item {
    cursor: pointer;
    text-align: center;
    padding: 7px 0;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      background-color: #f5f5f5;
    }
    h1 {
      font-size: 24px;
    }
    .is_active {
      position: absolute;
      right: 15px;
      top: 12px;
      color: #409eff;
    }
  }
  .item-active {
    background-color: #ecf5ff;
    color: #409eff;
  }
}
</style>
